CSS @when Regel: Conditionele Stijltoepassing Onder de Knie Krijgen

De wereld van CSS is voortdurend in ontwikkeling en biedt ontwikkelaars krachtigere en flexibelere manieren om webpagina's te stylen. Een van die functies die aan populariteit wint, is de @when regel, ook wel bekend als de CSS Conditional Rules Module Level 1. Met deze regel kunt u CSS-stijlen conditioneel toepassen, op basis van het voldoen aan specifieke voorwaarden. Het is een krachtig hulpmiddel voor responsive design, featuredetectie en het maken van robuustere en aanpasbare stylesheets.

Wat is de CSS @when Regel?

De @when regel is een conditionele at-rule in CSS waarmee u stijlen kunt definiëren die alleen worden toegepast als aan bepaalde voorwaarden wordt voldaan. Beschouw het als een if statement voor uw CSS. In tegenstelling tot media queries, die zich primair richten op viewportkenmerken (schermgrootte, oriëntatie, enz.), biedt @when een meer algemene en uitbreidbare manier om conditionele styling af te handelen. Het bouwt voort op bestaande conditionele at-rules zoals @supports en @media.

Belangrijkste Voordelen van het Gebruik van @when

• Verbeterde Codeleesbaarheid: Door conditionele logica in @when blokken in te kapselen, maakt u uw CSS gemakkelijker te begrijpen en te onderhouden. De intentie achter specifieke stijlttoepassingen wordt duidelijker.
• Verbeterde Flexibiliteit: @when kan complexere voorwaarden aan dan traditionele media queries, met name in combinatie met feature queries en JavaScript-gestuurde logica (met behulp van CSS Custom Properties).
• Vereenvoudigde Featuredetectie: @when integreert naadloos met @supports, waardoor u stijlen alleen kunt toepassen wanneer specifieke browserfuncties beschikbaar zijn. Dit is cruciaal voor progressieve verbetering.
• Meer Semantische Styling: @when stelt u in staat om elementen te stylen op basis van hun status of context, wat leidt tot meer semantische en onderhoudbare CSS. Bijvoorbeeld het stylen van elementen op basis van data-attributen of custom properties die zijn ingesteld door JavaScript.

Syntax van de @when Regel

            @when <voorwaarde> {
  /* CSS regels om toe te passen wanneer de voorwaarde waar is */
}
            

              
                Copy
              
            
          

De <voorwaarde> kan elke geldige booleaanse expressie zijn die evalueert naar waar of onwaar. Deze expressie omvat vaak:

• Media Queries: Voorwaarden op basis van viewportkenmerken (bijv. schermbreedte, apparaat oriëntatie).
• Feature Queries (@supports): Voorwaarden op basis van browserondersteuning voor specifieke CSS-functies.
• Booleaanse Algebra: Het combineren van meerdere voorwaarden met behulp van logische operatoren (and, or, not).

Praktische Voorbeelden van @when in Actie

1. Responsive Design met @when en Media Queries

De meest voorkomende use-case voor @when is responsive design, waarbij u stijlen aanpast op basis van de schermgrootte. Hoewel media queries dit op zichzelf kunnen bereiken, biedt @when een meer gestructureerde en leesbare aanpak, vooral bij het omgaan met complexe voorwaarden.

            @when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}
            

              
                Copy
              
            
          

In dit voorbeeld worden de stijlen binnen het @when blok alleen toegepast wanneer de schermbreedte tussen 768px en 1023px ligt (typische tabletgrootte). Dit biedt een duidelijke en beknopte manier om stijlen te definiëren voor specifieke viewportbereiken.

Internationalisatie Opmerking: Responsive design is cruciaal voor een wereldwijd publiek. Overweeg verschillende schermformaten in verschillende regio's. Mobiel gebruik is bijvoorbeeld hoger in sommige landen, waardoor mobile-first design nog crucialer is.

2. Featuredetectie met @when en @supports

@when kan worden gecombineerd met @supports om stijlen alleen toe te passen wanneer een specifieke CSS-functie wordt ondersteund door de browser. Hierdoor kunt u uw website progressief verbeteren, waardoor gebruikers met moderne browsers een betere ervaring krijgen, terwijl de compatibiliteit met oudere browsers behouden blijft.

            @when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback stijlen voor browsers die geen grid ondersteunen */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Breedte aanpassen voor oudere browsers */
  }
}
            

              
                Copy
              
            
          

Hier gebruiken we @supports om te controleren of de browser CSS Grid Layout ondersteunt. Zo ja, dan passen we grid-gebaseerde stijlen toe op de .container. Zo niet, dan bieden we fallback stijlen met behulp van flexbox om ervoor te zorgen dat een vergelijkbare lay-out wordt bereikt in oudere browsers.

Globale Toegankelijkheid Opmerking: Featuredetectie is belangrijk voor toegankelijkheid. Oudere browsers bieden mogelijk geen ondersteuning voor nieuwere ARIA-attributen of semantische HTML5-elementen. Zorg voor passende fallbacks om ervoor te zorgen dat de inhoud toegankelijk blijft.

3. Het Combineren van Media Queries en Feature Queries

De echte kracht van @when komt van de mogelijkheid om media queries en feature queries te combineren om complexere en genuanceerdere conditionele stijlbepalingen te creëren.

            @when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}
            

              
                Copy
              
            
          

In dit voorbeeld heeft het .modal element alleen een vervaagde achtergrond wanneer de schermbreedte minimaal 768px is en de browser de backdrop-filter property ondersteunt. Hierdoor kunt u visueel aantrekkelijke effecten creëren op moderne browsers, terwijl u mogelijke prestatieproblemen of renderingfouten op oudere browsers vermijdt.

4. Styling Op Basis van Custom Properties (CSS Variabelen)

@when kan ook worden gebruikt in combinatie met CSS Custom Properties (ook bekend als CSS-variabelen) om dynamische en state-driven styling te creëren. U kunt JavaScript gebruiken om de waarde van een custom property bij te werken en vervolgens @when gebruiken om verschillende stijlen toe te passen op basis van die waarde.

Definieer eerst een custom property:

            :root {
  --theme-color: #007bff; /* Standaard themakleur */
  --is-dark-mode: false;
}
            

              
                Copy
              
            
          

Gebruik vervolgens @when om stijlen toe te passen op basis van de waarde van de custom property:

            @when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}
            

              
                Copy
              
            
          

Gebruik ten slotte JavaScript om de waarde van de --is-dark-mode custom property te wijzigen:

            document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});
            

              
                Copy
              
            
          

Hierdoor kunnen gebruikers schakelen tussen lichte en donkere thema's, waarbij de CSS dynamisch wordt bijgewerkt op basis van de custom property waarde. Merk op dat directe vergelijking van CSS-variabelen in `@when` mogelijk niet universeel wordt ondersteund door alle browsers. In plaats daarvan moet u mogelijk een workaround gebruiken met een media query die controleert op een niet-nul waarde:

            @when ( --is-dark-mode > 0 ) { ... }
            

              
                Copy
              
            
          

Zorg er echter voor dat de custom property een numerieke waarde heeft om dit correct te laten functioneren.

Toegankelijkheid Opmerking: Het aanbieden van alternatieve thema's (bijv. dark mode) is cruciaal voor toegankelijkheid. Gebruikers met visuele beperkingen kunnen baat hebben bij thema's met een hoog contrast. Zorg ervoor dat uw themaschakelaar toegankelijk is via toetsenbord en schermlezers.

5. Styling Op Basis van Data Attributen

U kunt @when ook gebruiken met data attributen om elementen te stylen op basis van hun datawaarden. Dit kan handig zijn voor het maken van dynamische interfaces waarbij elementen van uiterlijk veranderen op basis van gebruikersinteractie of data-updates.

Stel bijvoorbeeld dat u een lijst met taken hebt en elke taak heeft een data-status attribuut dat de status aangeeft (bijv. "todo", "in-progress", "completed"). U kunt @when gebruiken om elke taak anders te stylen op basis van de status.

            [data-status="todo"] {
  /* Standaard stijlen voor todo taken */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}
            

              
                Copy
              
            
          

Opmerking: ondersteuning voor de attribute() testconditie is momenteel mogelijk beperkt of niet volledig geïmplementeerd in alle browsers. Test altijd grondig.

Browsercompatibiliteit en Polyfills

Vanaf eind 2024 is de browserondersteuning voor de @when regel nog in ontwikkeling. Hoewel veel moderne browsers de kernfunctionaliteit ondersteunen, is dit voor sommige oudere browsers mogelijk niet het geval. Daarom is het cruciaal om compatibiliteitstabellen te controleren en waar nodig passende fallbacks of polyfills te gebruiken.

Raadpleeg altijd bronnen zoals Can I use... om de huidige browserondersteuningsstatus van @when en gerelateerde functies te controleren.

Best Practices voor het Gebruik van @when

• Houd Voorwaarden Simpel: Vermijd overdreven complexe voorwaarden binnen @when blokken. Breek complexe logica op in kleinere, beter beheersbare stukken.
• Bied Fallbacks: Bied altijd fallback stijlen voor browsers die de functies die u gebruikt in uw @when regels niet ondersteunen. Dit zorgt voor een consistente ervaring in verschillende browsers.
• Test Grondig: Test uw CSS in verschillende browsers en apparaten om ervoor te zorgen dat uw @when regels werken zoals verwacht.
• Gebruik Zinvolle Opmerkingen: Voeg opmerkingen toe aan uw CSS om het doel van elke @when regel en de voorwaarden waarop deze is gebaseerd uit te leggen. Dit maakt uw code gemakkelijker te begrijpen en te onderhouden.
• Overweeg Prestaties: Vermijd het overmatig gebruik van @when regels, omdat deze de prestaties mogelijk kunnen beïnvloeden. Optimaliseer uw CSS om het aantal regels dat moet worden geëvalueerd te minimaliseren.

Conclusie

De @when regel is een krachtige toevoeging aan de CSS-toolbox en biedt ontwikkelaars een flexibelere en expressievere manier om stijlen conditioneel toe te passen. Door het te combineren met media queries, feature queries en CSS Custom Properties, kunt u robuustere, aanpasbare en onderhoudbare stylesheets maken. Hoewel browserondersteuning nog in ontwikkeling is, is @when een functie die het waard is om te verkennen en te integreren in uw moderne webontwikkelingsworkflow.

Naarmate het web zich blijft ontwikkelen, zal het beheersen van functies zoals @when essentieel zijn voor het creëren van boeiende, toegankelijke en performante ervaringen voor gebruikers over de hele wereld. Omarm de kracht van conditionele styling en ontsluit nieuwe mogelijkheden in uw CSS-ontwikkeling.